/***************************
	Category
***************************/
.category {
    font-size: 16px;
    margin-bottom: remCal(80);
    @include mq(md) {
      font-size: 14px;
    }
    .category__header {
      display: flex;
      justify-content: space-between;
      margin-bottom: emCal(16, 50);
      .category__header__text {
        h5 {
          @include typo($color: setColor(title), $fsz: emCal(16, 22));
          display: inline-block;
          margin-right: emCal(22, 5);
        }
        a {
          @include link(
            setColor(title),
            setColor(subTitle),
            $fsz: emCal(16, 22),
            $fw: 700
          );
          display: inline-block;
          text-decoration: underline;
        }
      }
    }
    .category_content {
      margin-bottom: remCal(20);
      width: 100%;
      .post-card {
        margin-bottom: emCal(16, 30);
      }
      &.-grid {
        .post-card {
          width: calc(50% - 10px);
          @include mq(sm) {
            width: 100%;
          }
        }
      }
      &.-list {
        .post-card {
          .card__cover {
            max-height: emCal(16, 220);
          }
        }
      }
    }
    .category__background {
        @include prefix(transition, $transition);
        background: {
            position: center;
            size: cover;
            repeat: no-repeat;
        }
    }
    &.-bar {
        font-size: 14px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: emCal(14, 25);
        overflow: hidden;
        border-radius: emCal(14, 5);
        &:hover {
            .category__background {
                transform: scale(1.1);
            }
        }
        .category__background {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            z-index: -1;
        }
        h5 {
            @include typo($fsz: emCal(14, 14), $color: #fff, $fw: 700, $up: true);
            &.quantity {
                height: emCal(14, 35);
                width: emCal(14, 35);
                background-color: #ebebeb;
                text-align: center;
                line-height: emCal(14, 35);
                border-radius: 999px;
                color: setColor(title);
            }
        }
    }
    &.-round {
        display: block;
        text-align: left;
        @include link(setColor(subTitle), setColor(highlight), 16px);
        &:hover {
            .category__background {
                transform: rotate(10deg);
            }
        }
        .category__background {
            height: emCal(16, 200);
            width: emCal(16, 200);
            margin-bottom: emCal(16, 30);
            border-radius: 999px;
            margin: 0 auto;
            margin-bottom: emCal(16, 30);
        }
        h5 {
            display: inline-block;
            &.quantity {
                &::before {
                    content: "(";
                }
                &::after {
                    content: ")";
                }
            }
        }
    }
    &.-square {
        display: block;
        text-align: center;
        @include link(setColor(title), setColor(highlight), 16px, $up: true);
        &:hover {
            .category__background {
                transform: translateY(-5px);
            }
        }
        .category__background {
            height: emCal(16, 105);
            width: 100%;
            border-radius: emCal(16, 5);
            margin: 0 auto;
            margin-bottom: emCal(16, 15);
        }
        h5 {
            display: inline-block;
            font-weight: 700;
            &.quantity {
                display: none;
            }
        }
    }
}